<template>
  <el-dialog :visible.sync="isShow" @close="close" width="70%" class="beforeCheckDialog" :show-close='false' :closeOnClickModal='false'
    append-to-body>
    <span slot="title" class="dialog-title">
		  	选择使用{{checkTitle}}检查项
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
    <el-table :data="allCheckData" size="mini" key="allCheckData" style="height:100%;" class="tableCon" ref="standardTable" @selection-change="handleRemoveChange">
      <el-table-column type="selection" min-width="38px" fixed>
      </el-table-column>
      <el-table-column label="序号" min-width="50px">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column property="checkType" label="检查项类型" min-width="100px">
        <template slot-scope="scope">
          <span v-if="scope.row.checkType === 0">测试前检查项</span>
          <span v-if="scope.row.checkType === 1">测试后检查项</span>
        </template>
      </el-table-column>
      <el-table-column property="content" label="检查项" min-width="100px">
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
			<el-button class="penalButton" type="primary" size="mini" @click="submit">确定</el-button>
      <el-button class="penalButton" size="mini" @click="close">取消</el-button>
	  </span>
  </el-dialog>

</template>

<script>
  export default {
    props: {
      checkTitle: String,
      checkId: String,
      allCheckData: Array,
    },
    data() {
      return {
        isShow: true,
        selectedCheck: [],
        rules: {
          name: [{ required: true, type: 'string', message: '请选择', trigger: 'blur' },],
          checkType: [{ required: true, type: 'string', message: '请选择', trigger: 'blur' },],
        },
      }
    },
    mounted() {
      //	this.form.fRef = this.checkId
    },
    methods: {
      handleRemoveChange(val) {
        console.log(val)
        this.selectedCheck = val
        this.checkRepeat()
      },
      close() {
        this.$parent.checkShow = false;

      },
      checkRepeat() {
        let count = [];
        this.$parent.checkData.forEach((value1) => {
          this.selectedCheck.forEach((value2) => {
            if (value1.content == value2.content) {
              count.push(value1.content)
            }
          });
        });
        console.log(count)
        return count
      },
      submit() {
        if (this.checkRepeat().length > 0) {
          this.$message({
            showClose: true,
            message: this.checkRepeat().join(',') + '重复添加！',
            type: 'warning'
          })
          return
        }
        let params = this.selectedCheck.map(item => {
          item.fRef = this.checkId
          return item
        })

        if (this.selectedCheck.length != 0) {
          this.$http({
            apiUrl: 'resource/addUsecheck.htm',
            method: 'post',
            params: params,
          }).then(res => {
            if (res.code == 0) {
              this.$message({
                showClose: true,
                message: '添加成功！',
                type: 'success'
              })
              this.$parent.checkShow = false
              if (this.checkTitle == '前') {
                this.$parent.init()
              } else {
                this.$parent.readUsecheckList()
              }

            }
          })
        } else {
          this.$message({
            showClose: true,
            message: '请选择添加项！',
            type: 'warining'
          })
        }
      }

    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
  .beforeCheckDialog  .el-dialog {
		margin-top: 10vh !important;
		height: 80%;
	}
</style>